<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11.props的特点</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react-dom核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器-->
    <div id="root"></div>
    <!--
        props的特点：
        1、可以给组件传递任意类型的数据，一般传递数据：字符串、数字、数组、布尔值
        2、props 是只读的对象，只能读取属性的值，不要修改props 
        3、可以通过`...`运算符(展开/扩展)来将对象的多个属性分别传入子组件
        4、如果父组件传入的是动态的 state 数据, 那一旦父组件更新 state 数据, 子组件也会更新
    -->
    <!--5、设置脚本类型,相当于里面所有代码都默认处在严格模式下，而严格模式下的函数的this为undefined-->
    <script type="text/babel">
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建类组件
        let { Component } = React;
        class App extends Component {
            state = {
                persons: {
                    //姓名
                    name: 'tom',
                    //年龄
                    age: 21
                }
            }
            render() {
                //读取状态数据
                // console.log(this.state);
                //解构
                let { persons: { name, age } } = this.state;
                return <div>
                    <p>个人信息：{name},{age}</p>
                    <button onClick={this.changeUser(5)}>更新个人信息</button>
                    <hr />
                    {/* <Child username={'张三'}></Child> */}
                    {/* 调用子组件 */}
                    <Person name={name} age={age}></Person>
                    <Person name={name} age={age}></Person>
                </div>
            }

            changeUser = num => {
                return () => {
                    let { persons: { age } } = this.state;
                    this.setState({
                        persons: {
                            name: 'jerry',
                            age: age + num
                        }
                    })
                }
            }
        }
        class Child extends Component {
            render() {
                //接收
                // this.props = { a: 1, b: 2 };
                console.log(this.props);
                return <div>Child</div>
            }
        }
        class Person extends Component {
            render() {
                //解构
                let { name, age } = this.props;
                return <div>
                    <h2>类组件-个人信息：姓名：{name},年龄:{age}</h2>
                </div>
            }
        }
        //8、渲染
        root.render(<App />); // let s1 = new App()
    </script>
</body>

</html>